<script setup lang="ts">
import { getImg } from '@/utils/util'
import { userEdit } from '@/api/user'
import { useUserStore } from '@/stores/user'
const bg = `url(${getImg('/img/icon/my/realName.png')})`
const params = reactive({
    name: '',
    idNumber: ''
})
const userStore = useUserStore()

/**
 * 验证身份证号码
 */
function idCard(value) {
    return /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(value)
}

const submit = async () => {
    if (!params.name) {
        uni.showToast({
            title: '请输入姓名',
            icon: 'none'
        })

        return
    }

    // if (!idCard(params.idNumber)) {
    //     uni.showToast({
    //         title: '请输入正确的身份证号码',
    //         icon: 'none'
    //     })
    //     return
    // }

    const res = await userEdit(params)

    if (res.code === 0) {
        // uni.showToast({
        //     title: '认证成功',
        //     icon: 'none'
        // })
        userStore.getUser()
        const t = setTimeout(() => {
            uni.reLaunch({
                url: '/views/subViews/mine/setting/authSuccess'
            })
        }, 1000)
    } else {
        uni.showToast({
            title: res.msg,
            icon: 'none'
        })
    }
}
// userEdit(params)
</script>

<template>
    <view class="real-name-box">
        <wxTopStatus></wxTopStatus>

        <view class="content-box">
            <view class="box-title">请使用有效身份证信息认证</view>
            <view class="inp-box flex-column gap-[40rpx]">
                <view>
                    <fui-input
                        backgroundColor="#f6f6f6"
                        labelSize="26"
                        v-model="params.name"
                        label="姓名"
                        :borderBottom="false"
                        placeholder="请输入姓名"
                        radius="999"
                        size="26"
                        :padding="['20rpx', '30rpx']"
                    ></fui-input>
                </view>
                <view>
                    <fui-input
                        backgroundColor="#f6f6f6"
                        labelSize="26"
                        label="证件号码"
                        v-model="params.idNumber"
                        :borderBottom="false"
                        placeholder="请输入证件号码"
                        radius="999"
                        size="26"
                        :padding="['20rpx', '30rpx']"
                    ></fui-input>
                </view>
                <view class="auth flex-center" @click="submit">立即认证</view>
            </view>
        </view>

        <view class="tips flex-row gap-[10rpx]">
            <fui-icon name="warning-fill" color="#999999" size="30"></fui-icon>
            <text> 实名仅用于您是否为真人用户，不会对信息做任何采集与保留，请放心使用。 </text>
        </view>
    </view>
</template>

<style scoped lang="scss">
.real-name-box {
    height: 100vh;
    background-image: v-bind(bg);
    background-color: #f6f6f6;
    background-size: 100%;
    background-repeat: no-repeat;

    .tips {
        margin: 30rpx;
        border-radius: 20rpx;
        font-size: 12px;
        background-color: #fff;
        color: #999999;
        padding: 20rpx;
    }

    .content-box {
        background: #fff;
        margin: 20vh 30rpx 0;
        border-radius: 20rpx;
        overflow: hidden;

        .box-title {
            padding: 30rpx;
            font-weight: 700;
            background-color: #f0f6fd;
        }

        .inp-box {
            padding: 40rpx 30rpx;
            .auth {
                width: 100%;
                background: linear-gradient(98deg, #376af7 14%, #40a9ff 83%);
                padding: 30rpx;
                border-radius: 999rpx;
                color: #fff;
                font-weight: 700;
                font-size: 13px;
            }
        }
    }
}
</style>
